<template>
  <BasicVxeModal
    v-bind="$attrs"
    :width="1000"
    :height="600"
    :title="title"
    :show-footer="false"
    @register="registerModal"
  >
    <!-- <template #title> </template> -->
    <div class="modal-container">
      <div class="basic-info">
        <BasicInfo :data="basicInfo"></BasicInfo>
      </div>
      <el-divider direction="vertical" />
      <div class="main-content">
        <BasicTabs v-model="tabName" :tabs="tabs" @tabChange="tabsChange"> </BasicTabs>
      </div>
    </div>
  </BasicVxeModal>
</template>

<script setup lang="ts">
  import { TabPaneItem } from '@/components/ui/basic-tabs/types'
  import { getJiTaiXiangQinList } from '@/api/shengChanJianShi'
  import { useVxeModalInner } from '@/components/ui/vxe-modal'
  import { MainCardDetailInfoType, BasicInfoType } from '../../components/types'
  import { useUserStore } from '@/store/modules/user'
  import BasicInfo from './components/basicInfo.vue'
  import DetailContent from './components/detailContentTab.vue'
  import HistoryState from './components/historyState.vue'

  defineEmits(['register'])

  const detailInfo = ref<MainCardDetailInfoType>()
  const basicInfo = ref<BasicInfoType>()
  const infoList = ref<any>([])
  const title = ref('')
  const tabName = ref('realtimeStatus')
  const machineId = ref('')

  const tabsChange = (tab) => {
    console.log(tab)
    infoList.value = []
    handleInfoData(tab)
  }

  const tabs = shallowRef<TabPaneItem[]>([
    {
      name: 'realtime',
      label: '实时状态',
      slots: { default: () => h(DetailContent, { infoList: infoList.value }) }
    },
    {
      name: 'warning',
      label: '故障信号',
      slots: { default: () => h(DetailContent, { infoList: infoList.value }) }
    },
    {
      name: 'io',
      label: 'IO信号',
      slots: { default: () => h(DetailContent, { infoList: infoList.value }) }
    },
    {
      name: 'process',
      label: '工艺设定',
      slots: { default: () => h(DetailContent, { infoList: infoList.value }) }
    },
    {
      name: 'settings',
      label: '基础设定',
      slots: { default: () => h(DetailContent, { infoList: infoList.value }) }
    },
    {
      name: 'historyState',
      label: '历史状态',
      slots: {
        // default: h(HistoryState, { mid: machineId.value, id: basicInfo.value?.craftNodeId })
        default: () => h(HistoryState, { mid: machineId.value, id: basicInfo.value?.craftNodeId })
      }
    }
  ])

  const userStore = useUserStore()
  const valueKeys = ref(JSON.parse(userStore.getSycConstant('valueKeys')))
  const handleInfoData = (val) => {
    const keysArray = valueKeys.value.find((value) => {
      return basicInfo.value?.craftNodeId === value.craftNodeId
    }).collectMeta

    for (let key in detailInfo.value?.machineRealInfo[val]) {
      let item = keysArray.find((value) => {
        return key.toUpperCase() == value.code && value.isShowWeb === true
      })
      if (item !== undefined) {
        infoList.value.push({
          key: item.name,
          value: detailInfo.value?.machineRealInfo[val][key] + item.magnificationUnit
        })
      }
    }
  }

  const [registerModal, { setModalProps }] = useVxeModalInner(async (_data) => {
    setModalProps({ loading: true })
    // detailInfo.value = _data.data as any
    machineId.value = _data.data.id
    title.value =
      _data.processName + ' ' + _data.data.machineTypeName + '-' + _data.data.machineName
    getDetailInfo(_data.data.id)
  })

  const getDetailInfo = (id) => {
    getJiTaiXiangQinList(id)
      .then((res: any) => {
        setModalProps({ loading: false })
        detailInfo.value = res
        basicInfo.value = res.basic
        handleInfoData('realtime')
      })
      .catch(() => {
        setModalProps({ loading: false })
      })
  }
</script>

<style lang="scss" scoped>
  .modal-container {
    padding: 5px 10px;
    display: flex;
    height: 100%;
    box-sizing: border-box;

    .el-divider {
      height: calc(62vh - 72px);
      min-height: 378px;
      margin: 2px;
    }

    :deep(.el-tabs) {
      height: 100%;
      .el-tab-pane {
        height: 100%;
      }
    }

    .basic-info {
      flex: 1;
      min-width: 180px;
    }

    .main-content {
      flex: 3;
      min-width: 450px;
      margin-left: 14px;
      height: 100%;
    }
  }
</style>
